
import React, { Component } from 'react'

export default class Index extends Component {

    // constructor(props) {
    //     super(props);
    //     this.state = {
    //         username: '张三'
    //     }
    // }

    state={
        username: '张三',
        usersex:"女",
        skills:["vue","uni"]
    }

    uniid = new Date().getTime().toString();


    onChangeUserName=e=>{
        this.setState({
            username: e.target.value
        })
    }

    changeUserSex=e=>{
        this.setState({
            usersex:e.target.value
        })
        // this.setState({
        //     usersex: this.state.usersex === '女' ? '男' : '女'
        // })
    }

    changeVal=e=>{
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    changeSkills=e=>{
        if(this.state.skills.some(item=>item===e.target.value)){
            this.setState({
                skills: this.state.skills.filter(item=>item!==e.target.value)
            })

        }else{
            this.setState({
                skills: [...this.state.skills,e.target.value]
            })
        }        
    }

  render() {
    return (
      <div>
        <h1>双向绑定</h1>
        <p>
            用户名：
            {/* <input type="text" name="username" value={this.state.username} onChange={this.onChangeUserName} /> */}
            <input type="text" name="username" value={this.state.username} onChange={this.changeVal} />
        </p>
        <p>
            性别：
            {/* <input type="radio" id="female" name="usesex" checked={this.state.usersex==="女"} value="女" onChange={this.changeUserSex} /> <label htmlFor="female">女</label>
            <input type="radio" id="male"  name="usesex"  checked={this.state.usersex==="男"} value="男" onChange={this.changeUserSex} /> <label htmlFor="male">男</label> */}
              <input type="radio" id="female" name="usersex" checked={this.state.usersex==="女"} value="女" onChange={this.changeVal} /> <label htmlFor="female">女</label>
            <input type="radio" id="male"  name="usersex"  checked={this.state.usersex==="男"} value="男" onChange={this.changeVal} /> <label htmlFor="male">男</label>
        </p>
        <p>
            具备的技能：
            <input type="checkbox" id="js"   checked={this.state.skills.includes("js")} onChange={this.changeSkills} value="js" /> <label htmlFor="js">原生JS</label>
            <input type="checkbox" id="vue" checked={this.state.skills.includes("vue")} onChange={this.changeSkills} value="vue" /> <label htmlFor="vue">vue</label>
            <input type="checkbox" id="mp" checked={this.state.skills.includes("mp")} onChange={this.changeSkills} value="mp" /> <label htmlFor="mp">小程序</label>
            <input type="checkbox" id={this.uniid} checked={this.state.skills.includes("uni")} onChange={this.changeSkills} value="uni" /> <label htmlFor={this.uniid}>uniapp</label>
        </p>
      </div>
    )
  }
}
